<template>
  <div
    :urlLoction="quickUrl===''?'':quickUrl.urlLoction"
    :urlName="quickUrl===''?'':quickUrl.urlName"
    :id="quickUrl===''?'':quickUrl.id"
    :class="{
       'link-module':true,
       'flipper':true,
       'new-link':true
       }">
    <div :class="{
        'module':true,
          'qyZindex':existence
    }">
      <section class="module-header">
        <h1>{{quickUrl===''?'':quickUrl.urlName}}</h1>
        <div class="btn-guroup" role="button" >
          <a class="link-set-icon set-btn" @click="setLink">
          </a>
        </div>
      </section>
      <span class="info-box-text">
        <img class="default-img" src="/static/resources/img/default-img.png">
        <div class="right-part">
          <p>欢迎使用</p>
          <a target="_blank" :href="quickUrl===''?'':quickUrl.urlLoction" class="btn btn-primary"><span>{{quickUrl===''?'':quickUrl.urlName}}</span></a>
        </div>
      </span>
    </div>
    <div :class="{
    'module':true,
    'qyZindex':modify
    }">
      <section class="module-header">
        <h1><input name="urlName" class="form-control"  id="urlName" v-model="urlName" placeholder="请输入名称"></h1>
        <div class="btn-guroup" role="button" >
          <span class="icon-btn delete" @click="deleteLink"></span>
        </div>
      </section>
      <span class="info-box-text">
        <input name="urlLoction" class="form-control" id="urlLoction" v-model="urlLoction" placeholder="请输入网址">
      </span>
      <div class="module-footer">
        <a @click="saveModule" class="primary">保存</a>
        <a @click="hidModule">取消</a>
      </div>
    </div>
    <div
      :class="{
        'module':true,
         'addLinkBtn':true,
          'qyZindex':addM
      }"
      >
      <span class="icon-btn add" @click="addLink" ></span>
    </div>
  </div>
</template>

<script>
    export default {
      name: "quick-url-html",
      props:['quickUrl'],
      data(){
        return {
          addM:false,
          existence:false,
          modify:false,
          urlLoction:'',
          urlName:''
        }
      },
      mounted(){
        if(this.quickUrl === ''){
          this.addM = true;
        }else {
          this.existence = true;
          this.urlLoction = this.quickUrl.urlLoction;
          this.urlName = this.quickUrl.urlName;
        }

      },
      methods:{
        addLink(){
          this.addM=false;
          this.existence=false;
          this.modify=true;
        },
        hidModule() {
          if(this.quickUrl === ''){
            this.addM=true;
            this.existence=false;
            this.modify=false;
          }else{
            this.addM=false;
            this.existence=true;
            this.modify=false;
          }
        },
        setLink(){
          this.addM=false;
          this.existence=false;
          this.modify=true;
        },
        saveModule() {
          if (this.urlName === '' || this.urlLoction === '') {
            showMsg("warn", "请输入名称和地址！");
            return;
          }
          if(this.urlLoction){
            let urlLoction = this.urlLoction.substr(0,7).toLowerCase()=="http://"?this.urlLoction:"http://"+this.urlLoction;
            let Expression =/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
            if(!Expression.exec(urlLoction)){
              showMsg("warn", "请规范输入网址！");
              return;
            }
          }
          if (this.quickUrl==='') {
            $.post(CUSTOM_SERVICE_URL + 'quickUrl/addQuickUrl', {
              'newUrlLoction': this.urlLoction,
              'newUrlName': this.urlName
            }).then((res)=>{
              let data = res.data;
              if (data.status === 'SUCCESS') {
                this.axios.post(CUSTOM_SERVICE_URL + "quickUrl/queryQuickUrl").then((res)=> {
                  let data = res.data;
                  if (data.status === 'SUCCESS' && data.body.length > 0) {
                    this.$emit('changeQuikUrl',data.body)
                  }
                });
              } else {
                showMsg("warn", "操作失败！");
              }
            });
          } else{
            let url = CUSTOM_SERVICE_URL + "quickUrl/updateQuickUrl";
            this.axios.post(url, {
              'id': this.quickUrl.id,
              'urlLoction': this.urlLoction,
              'urlName': this.urlName
            }).then((res)=>{
              let data = res.data;
              if (data.status === 'SUCCESS') {
                this.axios.post(CUSTOM_SERVICE_URL + "quickUrl/queryQuickUrl").then((res)=> {
                  let data = res.data;
                  if (data.status === 'SUCCESS' && data.body.length > 0) {
                    this.$emit('changeQuikUrl',data.body)
                  }
                });
              } else {
                showMsg("warn", "操作失败！");
              }
            });
          }
        },
        deleteLink(){
          if(this.quickUrl === ''){
            this.addM=true;
            this.existence=false;
            this.modify=false;
          }else{
            this.axios.post(CUSTOM_SERVICE_URL + "quickUrl/delQuickUrl", {'quickUrlId': this.quickUrl.id});
            this.addM=true;
            this.existence=false;
            this.modify=false;
          }
        }
      }
    }
</script>

<style scoped>
  .module.qyZindex{
    z-index: 5;
  }
</style>
